<template>
	<div>
		<div class="tab-pages">
			<jxkt-index v-if="tab_select == 'jxkt'"></jxkt-index>
			<mall-index v-if="tab_select == 'mall'"></mall-index>
			<my-index v-if="tab_select == 'my'"></my-index>
		</div>
		<div class="tab">
			<div :class="tab_select == 'jxkt' ? 'selected' : ''" @click="selectTab('jxkt')">
				警校课堂
			</div>
			<div :class="tab_select == 'mall' ? 'selected' : ''" @click="selectTab('mall')">
				商城
			</div>
			<div :class="tab_select == 'my' ? 'selected' : ''" @click="selectTab('my')">
				我的
			</div>
		</div>
	</div>
</template>

<script>

import JxktIndex from '@/components/jxkt/index';
import MallIndex from '@/components/mall/index';
import MyIndex from '@/components/my/index';

export default {
	name: 'index',
	components: {
		'jxkt-index': JxktIndex,
		'mall-index': MallIndex,
		'my-index': MyIndex,
	},
	data(){
		return {
			tab_select: 'jxkt',
		};
	},
	methods: {

		selectTab(value) {

			this.tab_select = value;
		}
	}
}
</script>

<style lang="scss" scoped>

.tab {
	display: flex;
	flex-flow: row;
	justify-content: space-around;
	align-items: center;

	position: fixed;
	bottom: 0;

	border-top: 1px solid #666;
	width: 100%;
	height: 1.07rem;


	.selected {
		color: red;
	}
}
</style>
